<template>
  <div>
    <cus-modal ref="modal" :title="!form.modeId ? '添加配餐模式' : form.modeName + ' - 修改配餐模式'"
      @on-visible-change="onVisibleChange" width="80" okBtnName="配餐设置" @onOk="onOk"
      @onOther="onOther" @onCancel="onCancel" :showOtherBtn="!form.modeId ? true : false">
      <div style="margin-bottom:10px">
        模式名称：<Input v-model="form.modeName" maxlength="20" :clearable="!form.modeId"
          placeholder="请输入模式名称" style="width: 200px"></Input>
      </div>
      <Table border :loading="loading" :columns="columns" :data="data">

        <template slot-scope="{ row, index }" :slot="item" v-for="item in slotList">
          <div class="flex">
            <InputNumber :min="0" :max="row.name == '个人份量'  ? '1000' : '10'"
              v-model.sync="data[index][item]" style="width: 100%;" :precision="0">
            </InputNumber> <span v-if="row.name == '个人份量'"> 克</span>

          </div>
        </template>

        <!-- <template slot-scope="{ row, index }" slot="基本主食">
          <InputNumber :min="0" :max="row.name == '个人份量' ? '1000' : '10'"
            v-model.sync="data[index]['基本主食']" style="width:100%"></InputNumber>
        </template> -->
        <!-- <template slot-scope="{ row, index }" slot="花样主食">
          <InputNumber :min="0" :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['花样主食']" style="width:100%"></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="大荤">
          <InputNumber :min="0" :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['大荤']" style="width:100%"></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="半荤">
          <InputNumber :min="0" :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['半荤']" style="width:100%"></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="小荤">
          <InputNumber :min="0" :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['小荤']" style="width:100%"></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="全素">
          <InputNumber :min="0" :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['全素']" style="width:100%"></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="小菜">
          <InputNumber :min="0" :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['小菜']" style="width:100%"></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="点心">
          <InputNumber :min="0" :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['点心']" style="width:100%"></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="乳品">
          <InputNumber :min="0" :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['乳品']" style="width:100%"></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="蛋品">
          <InputNumber :min="0" :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['蛋品']" style="width:100%"></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="粥">
          <InputNumber :min="0" :max="row.name == '个人份量' ? '1000' : '10'" v-model="data[index]['粥']"
            style="width:100%"></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="汤">
          <InputNumber :min="0" :max="row.name == '个人份量' ? '1000' : '10'" v-model="data[index]['汤']"
            style="width:100%"></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="水果">
          <InputNumber :min="0" :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['水果']" style="width:100%"></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="饮料">
          <InputNumber :min="0" :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['饮料']" style="width:100%"></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="军用食品">
          <InputNumber :min="0" :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['军用食品']" style="width:100%"></InputNumber>
        </template> -->
      </Table>
    </cus-modal>
    <!-- 模式菜肴详情 -->
    <modeDishesDetail ref="modeDishesDetail" @peiSuccess="peiSuccess"></modeDishesDetail>
  </div>
</template>

<script>
import {
	getCateringModeNumber,
	saveCateringModeNumber
} from '@/api/business/dishesModule'
import modeDishesDetail from './modeDishesDetail'
export default {
	components: { modeDishesDetail },
	data() {
		return {
			loading: false,
			form: { modeId: '', modeName: '' },
			columns: [
				{
					title: '',
					align: 'center',
					children: [
						{
							title: '餐次',
							key: 'name',
							align: 'center',
							width: 100
						}
					]
				}
			],
			data: [],
			slotList: []
		}
	},
	mounted() {
		// this.form = this.$cu.deepClone(form);
	},

	watch: {
		data: {
			handler(newVal, oldVal) {
				newVal.forEach((item) => {
					for (let it in item) {
						if (item[it] == null) {
							console.log(item[it])
							item[it] = 0
						}
					}
				})
				console.log(this.data)
				this.data = newVal
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		onVisibleChange(v) {
			if (!v) {
				this.form = { modeId: '', modeName: '' }
				this.columns = this.$options.data().columns
			}
		},
		show() {
			this.$refs['modal'].show = true
			// if (this.form.modeId) {
			//     this.getCateringModeNumberApi();
			// }
			this.getCateringModeNumberApi()
		},
		onOk() {
			this.$refs['modeDishesDetail'].form.modeName = this.form.modeName
			this.$refs['modeDishesDetail'].form.modeId = this.form.modeId
			this.saveCateringModeNumberApi()
				.then(() => {
					this.$refs['modeDishesDetail'].show(this.form)
				})
				.catch(() => {})
		},
		onCancel() {
			this.$parent.searchCateringModeListApi()
		},
		// 获取模板信息
		getCateringModeNumberApi() {
			this.loading = true
			this.data = []
			this.slotList = []
			return new Promise((resolve) => {
				getCateringModeNumber({ modeId: this.form.modeId }).then((res) => {
					this.loading = false
					if (res.retCode === 2000) {
						if (res.data.superiorCategory) {
							this.slotList = res.data.dishCategory
							let superiorCategory = res.data.superiorCategory

							let columnList = []
							// 表格制作
							superiorCategory.map((item, index) => {
								columnList[index] = {
									title: item,
									align: 'center',
									children: [
										{
											title: res.data.dishCategory[index],
											slot: res.data.dishCategory[index],
											align: 'center',
											width: 100
										}
									]
								}
							})
							let mergedArr = columnList.reduce((res, obj) => {
								let index = res.findIndex((el) => el.title == obj.title)
								if (index == -1) {
									res.push(obj)
								} else {
									res[index].children.push(...obj.children)
								}
								return res
							}, [])

							this.columns = this.columns.concat(mergedArr)
							// 表格数据
							let nameList = [
								{ name: '早餐', key: 'breakfast' },
								{ name: '午餐', key: 'lunch' },
								{ name: '晚餐', key: 'supper' },
								{ name: '个人份量', key: 'dishWeight' }
							]
							nameList.map((item, index) => {
								let obj = { name: item.name }
								res.data.dishCategory.map((it, idx) => {
									obj[it] = res.data[item.key][idx]
								})
								this.data.push(obj)
								console.log(res.data, 6666)
							})
							console.log(nameList, 999)
						}
						resolve()
					}
				})
			})
		},
		peiSuccess() {
			this.columns[1].children = []
			this.columns[2].children = []
			this.columns[3].children = []
			this.$refs['modal'].show = false
			// this.getCateringModeNumberApi()
		},
		// 保存
		onOther() {
			this.saveCateringModeNumberApi()
		},
		// 保存API
		saveCateringModeNumberApi() {
			return new Promise((resolve, reject) => {
				if (!this.form.modeName) {
					this.$Message.warning('配餐模式名称不能为空.')
					reject()
					return
				}
				let lunch = []
				let dishWeight = []
				let breakfast = []
				let supper = []
				this.data.forEach((item, index) => {
					if (index == 0) {
						this.slotList.map((it, idx) => {
							breakfast.push(item[it])
						})
					}
					if (index == 1) {
						this.slotList.map((it, idx) => {
							lunch.push(item[it])
						})
					}
					if (index == 2) {
						this.slotList.map((it, idx) => {
							supper.push(item[it])
						})
					}
					if (index == 3) {
						this.slotList.map((it, idx) => {
							dishWeight.push(item[it])
						})
					}
				})
				saveCateringModeNumber({
					modeId: this.form.modeId,
					modeName: this.form.modeName,
					lunch: lunch,
					supper: supper,
					breakfast: breakfast,
					dishWeight: dishWeight
				}).then((res) => {
					this.loading = false
					if (res.retCode === 2000) {
						this.$parent.searchCateringModeListApi()
						if (!this.form.modeId) {
							this.$Message.success('保存成功.')
							this.$emit('freshGrid')
						}
						this.form.modeId = res.data
						this.peiSuccess()
						resolve()
					}
				})
			})
		}
	}
}
</script>

<style scoped lang="less">
.permission {
	height: 300px;
	width: 500px;
	border: 1px solid #dcdee2;
	overflow-y: auto;
	border-radius: 2px;
	padding: 0 0 0 10px;
}
</style>
